<template>
  <div class="app-container">
    <div class="customContainer ">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-date-picker :editable="false" :clearable="false" v-model="pickerDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="daterange" align="right"
            unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row :data="list" border size="small" v-loading.body="listLoading" show-summary>
        <el-table-column align="center" prop="store_name" label="门店名称"></el-table-column>
        <el-table-column align="center" prop="money" label="收入" sortable></el-table-column>
        <el-table-column align="center" prop="actual_money" label="小程序核销" sortable></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getList, getStoreList } from '@/api/finance/account.js';
import { wx_moeny_list } from '@/api/finance/income_wx.js';
import { pickerDateDot, optionMaxTime } from '@/utils';

export default {
  data() {
    return {
      list: [],
      listLoading: false,
      storeList: [],
      formInline: {
        store_id: '',
        start_time: '',
        end_time: ''
      },
      pickerDate: pickerDateDot()
    };
  },
  created() {
    this.getStore();
  },
  methods: {
    //获取门店
    getStore() {
      getStoreList({ look_del: 0, category_id: 682 }).then(response => {
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else {
          if (this.storeList.length > 0) {
            this.formInline.store_id = this.storeList[0].id;
          }
        }
        this.searchClick();
      });
    },
    // 搜索
    searchClick() {
      optionMaxTime(this.pickerDate).then(() => {
        //最大可选择时间区间
        this.formInline.start_time = this.pickerDate ? this.pickerDate[0] : '';
        this.formInline.end_time = this.pickerDate ? this.pickerDate[1] : '';
        this.fetchData();
      });
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      wx_moeny_list(this.formInline)
        .then(response => {
          response.data &&
            response.data.forEach(item => {
              item.money = (item.money / 1).toFixed(2);
              item.actual_money = (item.actual_money / 1).toFixed(2);
            });
          this.list = response.data;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>